<template>
  <a-config-provider prefix-cls="ss">
    <div class="vip-modal">
      <a-modal :width="1180" :zIndex="1006" :visible="visible" @cancel="handleClose" :footer="null" :destroyOnClose="true" centered
        :maskClosable="false" wrapClassName="vip-modal" :closable="false"
        :bodyStyle="{ padding: 0, 'background': 'transparent', 'border-radius': '25px', 'overflow':'hidden' }">
        <template #closeIcon>
          <CloseOutlined style="color: #fff; font-size: 22px" />
        </template>
        <div class="vip-main">
          <div class="vip-header" >
            <div class="header-left">
              <div class="avatar-icon" v-if="currentLeftTContent?.is_team == 1">
                {{
                currentTeamInfo?.name && currentTeamInfo?.name.length > 0
                ? currentTeamInfo.name.slice(0, 1)
                : ""
                }}
              </div>
              <div class="avatar-icon" v-else>
                <img :src="user.avatar">
              </div>

              <div class="team-info" >
                <div class="team-name" >
                  <span>{{currentInfoTxt}}{{ currentLeftTContent?.is_team ==
                    1 ? currentTeamInfo?.name || user.nickname :
                      user.nickname }}</span>
                  <span class="team-num">{{ labelName }}：{{ score > 0 ? score : 0 }}</span>
                  <span @click="buyVisible = true" class="ml-15 cursor-pointer">
                    <img :src="pointIcon" style="width: 15px;height: 15px;">
                    购买{{labelName}}
                  </span>
                </div>
                <div class="team-tip">
                  <span>当前套餐：{{ versionInfo?.name }}</span>
                  <span style="margin-left: 20px;" :style="{color:isDateBeforeToday(versionInfo?.expire_time) ? 'red' : ''}">到期时间：{{versionInfo?.expire_time }}</span>
                  <span style="margin-left: 5px;color: red;" v-if="isDateBeforeToday(versionInfo?.expire_time)">(套餐已到期)</span>
                  <span class="team-rule" @click="ruleVisible = true">{{labelName}}规则</span>
                </div>

              </div>
            </div>
            <div class="header-right">
              <!-- <span>开通会员畅享更多特权，多端同步免费使用</span> -->
              <!-- <CloseOutlined class="close-icon" @click="handleClose" /> -->
              <CloseCircleFilled class="close-icon" @click="handleClose" />
            </div>
          </div>
          <div class="tabs" >
            <div class="tabs-container">
              <div class="tabs-list">
                <!-- v-for="(item, index) in tabList" @click="tabChange(index, item.id)" -->
                <div class="tabs-list-item"  
                  :key="index">
                  <img src="@/common/image/shotstack/tab-item-left.png"
                    class="tabs-list-item-img">
                  <div class="tabs-list-item-text active-text">
                    <span class="title_content_text">团队/企业</span>
                    <span class="title_tips">会员立享优惠</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="tab-list">
              <div
                class="tab-item"
                :class="currentTab == index ? 'active-tab' : ''"
                v-for="(item, index) in tabList"
                :key="index"
                @click="tabChange(index, item.id)"
              >
                {{ item.title }}
              </div>
            </div> -->
          <div class="vip-content">
            <div class="vip-left-content">
                <div class="vip-left-content-header">
                  <div class="left-title">{{ currentLeftTContent?.title }}</div>
                  <div class="left-desc">{{ currentLeftTContent?.introduce }}</div>
                </div>
                <div class="line"></div>
                <!-- <template v-if="currentLeftTContent.detail"> -->
                  <div class="package_content_box">
                    <div class="package_content" v-for="(item, index) in briefIntroduction" :key="index">
                      <span class="point"></span><span>{{ item }}</span>
                    </div>

                    <div class="view_more_box">
                      <span class="view_more" @click="viewMore = !viewMore">
                        {{ viewMore ? '收起更多' : '查看更多' }} </span>
                    </div>
                  </div>
                <!-- </template> -->
              <!-- <template v-if="contact_url">
                <div class="bottom_con">
                  <div class="left_ercode_1">
                    <img style="width: 100%; height: 100%" :src="contact_url" alt="" />
                  </div>
                  <div class="right_text">
                    <div>支付遇到问题？</div>
                    <div>扫码联系客服</div>
                  </div>
                </div>
              </template> -->
            </div>
            <div class="vip-right-content">
              <div class="left-arrow" :class="leftArrowBtn?'btn-disabled':''" v-if="packageList?.length && showArrow"
                @click="leftScroll">
                <left-outlined />
              </div>
              <div class="right-arrow" :class="rightArrowBtn?'btn-disabled':''" v-if="packageList?.length && showArrow"
                @click="rightScroll">
                <right-outlined />
              </div>
              <div class="package_list_container">
                <div calss="contact_box" style="display: flex; align-items: center; justify-content: space-between;">
                  <h2 class="contact_box_title" style="margin: 0; font-size: 20px; font-weight: 600;">请选择套餐</h2>
                  <span class="contact_box_desc" style="font-size: 12px; color: #666; display: flex; align-items: center; cursor: pointer;" @click="contactCustomerService">充值即时到账，有任何疑问，可联系客服 <RightOutlined></RightOutlined></span>
                </div>
                <div class="package_list" id="benefitsCon">
                  <div class="package_item" v-for="(item, index) in packageList" :key="index"
                    @click="packageChange(item)" :class="currentPackage.id == item.id ? 'active-package' : ''">
                    <!-- 角标 -->
                    <div class="subscript" v-if="item?.badge?.text" :style="{
                      'background-color': item?.badge?.color || 'skyblue'
                    }">
                      <span>{{ item.badge.text }}</span>
                    </div>
                    <div class="package_item-con">
                      <div class="top_bar">
                        <div class="benefits_name">{{ item.name }}</div>
                        <div class="benefits_desc">{{ item.introduction }}</div>
                      </div>

                      <div class="package_price">
                        ￥<span class="pay-money">{{ item.is_dicker? '?':item.money }}</span>
                      </div>

                      <div class="package_props_con">
                        <div class="package_props_item" v-for="(props_item, props_index) in item.content"
                          :class="props_index < 3 ? 'font-bold' : ''" :key="props_index">
                          {{ props_item }}
                        </div>
                      </div>
                    </div>
                    <div class="give-item" v-if="item.point_coin.value">
                      <span class="give-item-icon">赠</span>
                      <span class="give-item-text">赠送{{ item.point_coin.value }}个{{ item.point_coin.alias }}</span>
                    </div>

                  </div>
                </div>
                <div class="pay-area">
                  <div class="pay-qr-code">
                     <template v-if="state.payQrCodeUrl || contact_url">
                       <a-image :preview="false" style="width: 120px;height: 120px" :src="state.payQrCodeUrl"
                         :fallback="contact_url" v-if="!currentPackage.is_dicker">
                       </a-image>
                       <img :src="contact_url" v-else />
                     </template>
                     <template v-else>
                      <a-empty style="width: 120px;height: 120px; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
                     </template>
                  </div>
                  <div class="pay-content-area">
                    <div class="pay-moneny-area">
                      <span class="momey-label">应付金额：</span>
                      <span class="momey-value">￥{{ currentPackage.is_dicker? '?':currentPackage?.money??'?' }}</span>
                      <span class="discount" v-if="currentPackage?.discount_price&&!currentPackage.is_dicker">已优惠 ￥{{
                        currentPackage?.discount_price??'' }}</span>
                    </div>
                    <div class="pay-type">
                      <div class="methods_tab">
                        <span class="momey-label">支持支付方式：</span>
                        <template v-if="!currentPackage.is_dicker">
                          <div class="methods_item" @click="payTypeChange(index, item, 'pay')"
                            v-for="(item, index) in state.payMethods" :key="index">
                            <img :src="item.icon" style="
                            width: 18px;
                            height: 18;
                            border-radius: 10px;
                            overflow: hidden;
                          " alt="" />
                            <div>{{ item.tab_name }}</div>
                          </div>
                        </template>
                        <span v-else>请联系客服</span>
                      </div>
                    </div>
                    <div class="pay-tip">
                      过期算力将失效，续费后会激活之前剩余算力
                    </div>
                    <div class="pay-bottom" @click="vipVisible = true">
                      <div class="user-agreement">支付即视为您同意</div>
                      <div class="user-link"> 《会员服务协议》 </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
      <a-modal v-model:visible="state.qrVisible" :width="400" :footer="false">
        <div style="
              display: flex;
              justify-content: center;
              flex-direction: column;
              align-items: center;
              color: #999999;
              padding: 40px 0px;
            ">
          <div style="width: 200px; height: 200px; margin-bottom: 20px">
            <img style="width: 100%; height: 100%" :src="contact_url" />
          </div>
          <div>微信扫码咨询客服</div>
        </div>
      </a-modal>
      <memberShip :rechargeData="state.rechargeData" :visible="state.showMemberShip"
        :isTeam="currentLeftTContent?.is_team" @close="closeMemberShip" />
      <ProtocolModal :visible="vipVisible" titleTxt="会员服务协议" :content="pay_agreement_url" @onClose="vipVisible = false">
      </ProtocolModal>
      <ruleModal v-model:visible="ruleVisible" :labelName="labelName">

      </ruleModal>
      <rechargeModal :visible="buyVisible" @close="buyVisible = false" @success="successVisible"></rechargeModal>

      <!-- 联系客服弹窗 -->
      <contactDialog ref="contactDialogRef"></contactDialog>
    </div>
  </a-config-provider>

</template>
<script setup>
import { watch, ref, reactive, onMounted, computed } from "vue";
import request from "@/common/utils/request";
import {
  CloseOutlined,
  LeftOutlined,
  RightOutlined,
  CloseCircleFilled,
  
} from "@ant-design/icons-vue";
import utils from "@/common/utils/utils";
import store from "@/store";
import memberShip from "@/socialMedia/PersonalCenter/modules/memberShip.vue";
import rechargeModal from "@/socialMedia/AccountCenter/modules/rechargeModal.vue";
import ProtocolModal from "@/components/ProtocolModal/Index.vue";
import ruleModal from "./components/ruleModal.vue";
import { tryOnMounted } from "@vueuse/core";
import { Empty } from 'ant-design-vue';

let emits = defineEmits(["close"]);
let props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
import weixinIcon from "@/common/image/weixin_icon.png";
import alipayIcon from "@/common/image/alipay_icon.png";
import { message } from "ant-design-vue";
// 联系客服弹窗
import contactDialog from './components/contactDialog.vue'

import dayjs from 'dayjs';

const contactDialogRef = ref(null)
let tabList = ref([]);
let currentTab = ref(0);
let leftContentList = ref([]);
let vipVisible = ref(false);
let currentLeftTContent = ref({});
let user = ref({nickname:'',avatar: ''});
let ruleVisible = ref(false)
let currentInfoTxt = computed(() => {
  return currentLeftTContent.value?.is_team == 1?'当前团队：':'当前用户：'
})
let currentTeamInfo = computed(() => {
  const info = store.state.user.teamList.find((item) => item.id == utils.getCurrentTeam())
  console.log('用户的信息11111', info);
  
  return info ;
})
let point_coin_info = ref({});
let currentPackage = ref({
  id: 0,
  payUrl: "",
  name: "",
  content: [],
  money: '?',
  point_coin: {
    alias: "积分",
  },
});
let showArrow = ref(false);
let pay_agreement_url = ref("");
let contact_url = ref("");
let packageList = ref([]);
let scrollLeft = ref(0);
const state = reactive({
  rechargeData: {},
  showMemberShip: false,
  loading: false,
  qrVisible: false,
  showMemberTeam: false,
  showMemberBusiness: false,
  payQrCodeUrl: "",
  payMethods: [
    {
      tab_name: "微信支付",
      icon: weixinIcon,
      tab_id: 0,
    },
    {
      tab_name: "支付宝",
      icon: alipayIcon,
      tab_id: 0,
    },
  ],
  payIndex: 0,
  checkPayTimer:null,
});
let buyVisible = ref(false);
let pointIcon = new URL(
  "@/common/image/shotstack/point-icon.png",
  import.meta.url
).href;
let errorImg =''
let score = ref(0)
const labelName = ref('积分')
let leftArrowBtn = computed(() => {
    return scrollLeft.value <= 0 ? true : false;
})
let rightArrowBtn = computed(() => {
    let dom = document.getElementById("benefitsCon");
    return scrollLeft.value >= dom.scrollWidth - dom.offsetWidth  ? true : false;
})

// 用户的套餐信息
const versionInfo = computed(() => {
  const info = store.state.shotstack.versionInfo
  return info || {}
})

const successVisible = ()=>{
  getTabList()
}
const closeMemberShip = (is_business) => {
  state.showMemberShip = false;
  state.rechargeData = {};
};
const showArr = () => {
  let timeout = setTimeout(() => {
    let dom = document.getElementById("benefitsCon");
    if (dom?.scrollWidth - dom?.offsetWidth > 0) {
      showArrow.value = true;
    } else {
      showArrow.value = false;
    }
    clearTimeout(timeout);
  }, 500);
};
const rightScroll = () => {
  let dom = document.getElementById("benefitsCon");
  if (dom.scrollLeft >= dom.scrollWidth - dom.offsetWidth) return;
  dom.scrollLeft += 285 * 2.5;
  scrollLeft.value += 285 * 2.5;
};

const leftScroll = () => {
  let dom = document.getElementById("benefitsCon");
  if (dom.scrollLeft == 0) return;
  dom.scrollLeft -= 285 * 2.5;
  scrollLeft.value = dom.scrollLeft;
  scrollLeft.value-= 285 * 2.5;
  if (scrollLeft.value <= 0) {
    dom.scrollLeft = 0;
    scrollLeft.value = 0;
  }
};
const getBgColor = (can_pay, is_dicker) => {
  let normalBgColor = {
    background: `linear-gradient(90deg, #77aefa, #5477ff)`,
  };
  let disabledBgColor = {
    background: `linear-gradient(90deg, #77aefa, #5477ff)`,
  };

  return is_dicker ? "" : can_pay ? normalBgColor : disabledBgColor;
};
const getQrCodeUrl = (qrCode) => {
  let params = {
    qrCode,
  };
  request.get("/public", "/qrcode", params).then((result) => {
    state.payQrCodeUrl = result.url;

    const params = new URLSearchParams(qrCode);
    const orderId =
      params.get("tmp_order_id") 
    checkPayHandle(orderId);
  });
};
const getCurrentPackageDetail = async (item)=>{
  
  if(state.checkPayTimer){
    clearInterval(state.checkPayTimer);
  }
  currentPackage.value = item;
  const villageInfo = await store.dispatch("GetVillageInfo");
  request
      .post("/work_ai", "/user/shotstack/order/tmpPayOrder", {
        from: "ai",
        package_id: item.id,
        team_id: utils.getCurrentTeam(),
        village_id: villageInfo ? villageInfo.id : 0,
      })
      .then((res) => {

        if(res.order_id===undefined){
          state.loading = false;
          return;
        }
       
       let payUrl = item.payUrl + "&tmp_order_id=" + res.order_id;
        getQrCodeUrl(payUrl);
        state.loading = false;
      })
      .catch(() => {
        state.loading = false;
      });
}

const checkPayHandle = (order_id) => {
      state.checkPayTimer = setInterval(() => {
        request
          .get("/work_ai", "/order/shotstack/getOrderStatus", {
            order_id: order_id,
          })
          .then((checkResult) => {
            if (checkResult?.code && checkResult.code != 1000) {
              clearInterval(state.checkPayTimer);
              return
            }
            if (checkResult.status == 4) {
				  message.error("订单超时已取消");
          clearInterval(state.checkPayTimer);
          currentPackage.value.id&&getCurrentPackageDetail(currentPackage.value)
			  } else if (checkResult.status  ==  1) {
				clearInterval(state.checkPayTimer);
        store.dispatch("GetVersionInfo");
				message.success("支付成功，即将跳转");
				setTimeout(() => {
					handleClose();
					router.push({ name: "MediaBusinessRecord" });
				}, 1000);
            }
          });
      }, 2000);
    };
const payTypeChange = (index)=>{
  if (state.payIndex == index) return;
  state.payIndex = index;
}
const openShipModal = async (item) => {
   
  if (item.is_dicker) {
    //如果是大客户版本
    return (state.qrVisible = true);
  }
  
  if (state.loading) {
    return;
  }
  state.loading = true;
  if (item.can_pay == 0){
    state.loading = false;
    return;
  }
  const villageInfo = await store.dispatch("GetVillageInfo");
  setTimeout(() => {
    request
      .post("/work_ai", "/user/shotstack/order/tmpPayOrder", {
        from: "ai",
        package_id: item.id,
        team_id: utils.getCurrentTeam(),
        village_id: villageInfo ? villageInfo.id : 0,
      })
      .then((res) => {
        if (res?.pay_status === "success") {
          message.success("操作成功");
          state.loading = false;
          state.rechargeData = {};
          return;
        }
        state.showMemberShip = true;
        state.rechargeData["option"] = {};
        state.rechargeData["option"]["money"] = item.money ? item.money : "0";
        state.rechargeData["order_id"] = res.order_id;
        state.rechargeData["payUrl"] =
          item.payUrl + "&tmp_order_id=" + res.order_id;
        state.loading = false;
      })
      .catch(() => {
        state.loading = false;
      });
  }, 500);
};
const handleClose = () => {
  emits("close");
};
const initScroll = () => {
  let dom = document.getElementById("benefitsCon");
  dom.scrollLeft = 0;
  scrollLeft.value = 0;
}
const tabChange = (index) => {
  currentTab.value = index;
  initScroll()
  showArr()
  getLeftContent();
  getBenefitsList();
};
const getTabList = () => {
  request
    .get("/work_ai", "/user/order/package/media/tab/list", {})
    .then((res) => {
      tabList.value = res.result;
      getLeftContent();
      getBenefitsList();
    });
};
const getLeftContent = () => {
  return request.get("/work_ai", "/order/package/set/list").then((res) => {
    if (res.result.length != 0) {
      leftContentList.value = res.result;
      let is_team = tabList.value[currentTab.value].isMediaTeam;
      currentLeftTContent.value = leftContentList.value.find(
        (item) => item.is_team == is_team
      );
    }
  });
};
const getConfig = () => {
  request.get("/work_ai", "/config").then((res) => {

    if (res.list && res.list.pay_agreement_url) {
      pay_agreement_url.value = res.list.pay_agreement_url;
    }
    if (res.list && res.list.service_qrcode) {
      contact_url.value = res.list.service_qrcode;
    }
  });
};
const getBenefitsList = () => {
  let is_media_team = tabList.value[currentTab.value].isMediaTeam;
  request
    .get("/work_ai", "/user/shotstack/package/list", { is_media_team })
    .then((res) => {
      packageList.value = res.result;
      score.value = res?.point_coin??0
   
      if(packageList.value.length){
        labelName.value = res.result[0]?.point_coin?.alias??'积分'
        let item = packageList.value.find(item => item.can_pay==1&&item.money!=0)
        if(item){
          getCurrentPackageDetail(item)
        }
       
      }
      //   state.subTitle = res?.prompt;
      showArr();
    //   tryOnMounted(() => {
    //     nextTick(() => {
    //       const benefitsCon = document.getElementById("benefitsCon");
    //       if (benefitsCon) {
    //         benefitsCon.scrollLeft += benefitsCon.scrollWidth;
    //       }
    //     });
    //   });
    });
};
const packageChange = (item)=>{
  if(currentPackage.value.id == item.id){
    return;
  }
  
  if(item.is_dicker==0){
    // &&item.money!=0
    if (item.can_pay == 1 ){
      getCurrentPackageDetail(item)
    }else{
      message.warning("当前套餐不支持充值");
    }
   
  }else if(item.is_dicker==1){
    currentPackage.value = item;
    state.checkPayTimer&&clearInterval(state.checkPayTimer);
  }
}


// 获取当天的日期
let today = dayjs().startOf('day'); // 将当前时间截取到今天的午夜 00:00:00
// 判断是否小于当天日期
function isDateBeforeToday(date) {
  return dayjs(date).isBefore(today);
}

onMounted(() => {
  window.addEventListener("resize", showArr, true);
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      showArr();
      getConfig();
      getTabList();
      utils.getUserInfo().then((userInfo) => {
        if (userInfo.avatar) {
            user.value.nickname = userInfo.nickname;
            user.value.avatar = userInfo.avatar;
         }
      });
    } else {
      window.removeEventListener("resize", showArr);
      currentTab.value = 0;
      initScroll()
      clearInterval(state.checkPayTimer);
    }
  }
);

// 打开购买弹窗
const openBuyVisible = () => {
  buyVisible.value = true;
}

// 联系客服
const contactCustomerService = () => {
  contactDialogRef.value && contactDialogRef.value.showModal()
}

// 查看更多
const viewMore = ref(false)

// 弹窗左侧列表
const briefIntroduction = computed(() => {
  const detail = currentLeftTContent.value?.detail
  if (!detail) return []
  const list = currentLeftTContent.value?.detail.split('\n')
  return viewMore.value ? list : list.slice(0, 11)
 
})


defineExpose({
  openBuyVisible
})

</script>
<style lang="less" scoped>

.vip-modal {
  :deep(.ant-modal-content){
        padding: 0 !important;
        border-radius: 30px !important;
  }
}

// :deep(.ant-modal-content){
//   border-radius: 20px;
//   overflow: hidden;
// }

.vip-main {
  height: 702px;
  background-color: #fff;
}
.vip-header {
  width: 100%;
  // height: 70px;
  // height: 160px;
  background-color: #292d42;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  color: #fff;
  padding: 30px 20px 80px 20px;
  background-image: url('@/common/image/shotstack/header-banner.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  margin: 0 20px 0px;
}
.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #e6e6e6;
  padding-left: 150px;
  align-self: flex-start;
  transform: translateY(-40px);
}
.team-tip{
  font-size: 12px;
  margin-top: 2px;
}
.avatar-icon {
  width: 50px;
  height: 50px;
  background-color: var(--ss-primary-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.close-icon {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 20px 10px 20px 20px;
}
.tab-list {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #292d42;
}
.tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  color: #fff;
  font-weight: 700;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #9b9daa;
  font-size: 16px;
  cursor: pointer;
  flex: 1;
  margin-left: 2px;
  height: 100%;
  &:first-child {
    margin-left: 0;
  }
}
.vip-content {
  width: 100%;
  // height: calc(100% - 150px);
  padding: 0px 20px 0px 0px;
  height: calc(100% - 160px);
  // background-color: #f2f2f2;
  // padding: 20px;
  display: flex;
  justify-content: flex-start;
  // border-radius: 10px;
  overflow: hidden;
}
.vip-left-content {
  width: 22%;
  height: 100%;
  padding: 30px 20px 10px 20px;
  background-color: #f7f9fa;
  position: relative;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;


  .package_content_box{
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
      //   隐藏滚动条
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .view_more_box{
  text-align: center;      
  cursor: pointer;
    color: var(--ss-primary-color);
  &:hover{
    color: var(--ss-primary-color-hover);
  }
    .view_more{
      font-size: 12px;
    }
    }
  }
  //   align-items: center;
}
.vip-right-content {
   position: relative;
   width: 78%;
   height: 100%;
   padding: 10px 0;
  .package_list_container{
    height: 100%;
    overflow-y: auto;
    background-color: #f9f9fa00;
    padding: 0px 10px;

  }

}

.active-tab {
  background-color: rgb(88 147 247) !important;
}
.left-title {
  font-weight: 700;
  font-size: 20px;
  color: #000;
}
.left-desc {
  margin-top: 10px;
  font-family: PingFang SC;
  font-weight: 700;
  color: #666;
  white-space: pre-wrap;
}
.package_list {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 0 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
  //  隐藏滚动条
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .package_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 287px;
    min-height: calc(642px - 192px - 300px);
    background: #fff;
    border-radius: 10px;
    text-align: center;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid #e9edf2;
    position: relative;
    overflow: hidden;
    padding: 10px;
    // 角标样式
    .subscript{
      position: absolute;
      right: 0;
      top: 0;
      padding: 0 20px;
      background-color: skyblue;
      border-radius: 0 0 0 10px;
      color: #fff;
      font-size: 12px;

    }

    .package_item-con{
      display: flex;
      flex-direction: column;
    }
    .package_price {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f2372e;
      .pay-money {
        font-size: 36px;
      }
    }
    .package_name {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 700;
      color: #333;
      padding-top: 10px;
    }
    .package_props_con {
      // margin-top: 20px;
      min-height: 104px;
      padding-bottom: 20px;
      .package_props_item {
        font-size: 14px;
        font-family: PingFang SC;

        white-space: pre-wrap;
        letter-spacing: 1px;
        margin-top: 4px;
      }
      .font-black {
        // color: #000;
      }
      .font-bod {
        font-weight: 700;
      }
    }
  }
  .active-package {
    // background: #fffbf4;
    border: 2px solid var(--ss-primary-color);
    border-radius: 10px;
    .give-item{
      background-color: var(--ss-primary-color);
    }
    .give-item-text{
       color: #fff;
    }
   
  }
}
.pay-content {
  padding: 20px;
  width: 100%;
  height: 180px;
  background: #f9f9fa;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 30px;
}
.methods_tab {
  display: flex;
  .momey-label{
    color: #999999;
  }
}
.methods_tab_item {
  width: 116px;
  height: 34px;
  border: 2px solid #dfdfdf;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  cursor: pointer;
}
.status_btn {
  margin-top: 10px;
  width: 189px;
  height: 44px;
  background: linear-gradient(90deg, #ff574a, #fdb63b);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
}
.status_btn_disabled {
  margin-top: 10px;
  width: 189px;
  height: 44px;
  background: linear-gradient(90deg, #ff574a, #fdb63b);
  opacity: 0.43;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
}
.right-arrow {
  position: absolute;
  top: 50%;
  right: -10px;
  z-index: 11;
  transform: translateY(-280%);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #ffffff;
  color: var(--ss-primary-color);
  font-size: 20px;
  box-shadow: 0 0 18px var(--ss-primary-2);
  border-radius: 50%;
  cursor: pointer;
  display: none;
  transition: 0.3s ease;
}

.left-arrow {
  position: absolute;
  top: 50%;
  left: -10px;
  z-index: 11;
  transform: translateY(-280%);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #ffffff;
  color: var(--ss-primary-color);
  font-size: 20px;
  box-shadow: 0 0 18px var(--ss-primary-2);
  border-radius: 50%;
  cursor: pointer;
  display: none;
  transition: 0.3s ease;
}
.btn-disabled{
    opacity: 0.5!important;
    cursor: not-allowed!important;
}
.vip-right-content:hover {
  .right-arrow {
    display: block;
  }

  .left-arrow {
    display: block;
  }
}
.line {
  height: 1px;
  border: 0;
  width: 100%;
  background-color: #d4d3d3;
  filter: drop-shadow(1px 1px 2px 2px #333);
  margin: 10px 0 10px 0;
}
.package_content {
  font-family: PingFang SC;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;

  .point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #666666;
    flex-shrink: 0;
  }
}
.bottom_con {
  // width: 90%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  // position: absolute;
  height: 88px;
  padding: 0 10px;
  margin-top: 50px;
  // bottom: 10px;
  // left: 5%;

  .left_ercode_1 {
    width: 70px;
    height: 70px;
  }

  .right_text {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #999999;
    margin-left: 15px;
  }
}
.text-36 {
  font-size: 36px;
}
.top_bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 80px;
  // overflow: hidden;

  // background: linear-gradient(0deg, #fff, #fff5db);
  border-radius: 10px 10px 0px 0px;

  .benefits_name {
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #333333;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: auto;
    overflow: hidden;
  }

  .benefits_desc {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #fe7b42;
    margin-top: 5px;
    overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      width: auto;

  }
}
.horizantal_line {
  width: calc(100% - 40px);
  height: 2px;
  background: #eeeeee;
  margin: 30px 0;
}
.create_fun {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 50px;

  .fun_name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .fun_item {
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left_label {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      width: calc(100% - 30px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .right_icon {
    }
  }
}
.team-info{
  display: flex;
  flex-direction: column;
}
.team-name{
  font-weight: 700;
}
.tabs{
  font-size: 18px;
   z-index: 200;
   margin-top: -50px;
   position: relative;
   .tabs-container{
    background: rgba(56, 91, 220, .5019607843137255);
    height: 50px;
    border-radius: 20px 20px 0 0;
    .tabs-list{
      height: 100%;
      display: flex;
      .tabs-list-item{
        display: flex;
        // flex: 1;
        width: 50%;
        position: relative;
        // justify-content: flex-start;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .tabs-list-item-img{
          position: absolute;
          width: 100%;
          height: 60px;
          top: -10px;
          }
          .tabs-list-item-text{
            z-index: 100;
            line-height: 24px;
            font-weight: 700;
            transform: translateX(-115px);
          .title_content_text{
            font-size: 18px;
          }
          .title_tips{
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
          }
          .active-text{
            color: #202123;
          }



        }
      }
    }
   }
 .give-item{
  display: flex;
  height: 36px;
  align-items: center;
  justify-content: center;
 width: 100%;
 height: 36px;
 background-color: #eff3fc;
 border-radius: 10px;
  margin-top: 2px;
  .give-item-text{
    color: #333333;
  }
  .give-item-icon{
    background-color: #fcdcdd;
    color:#e75767;
    font-size: 14px;
    margin-right: 10px;
    padding: 0 2px;
    border-radius: 2px;
  }
 }  
 .pay-area{
  display: flex;
  gap:10px;
  margin-top: 10px;
  padding: 18px 20px;
  background-color: #f9f9fa;
  border-radius: 20px;
  .pay-qr-code{
    img{
      width: 110px;
      height: 110px;
    }
  }
  .pay-content-area{
    .methods_tab {
      display: flex;
      align-items: center;
      font-size: 14px;
      .methods_item {
        // width: 116px;
        // height: 34px;
        // border: 2px solid #dfdfdf;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        cursor: pointer;

        &:nth-child(1) {
          margin-left: 0;
        }

        &.pay_active {
          border: 0;
          background-image: url("@/common/image/pay_selected.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .pay-type{
      margin: 5px 0 0px 0;
    }
    .pay-tip{
      // margin: 5px 0;
      color: #f2372e;
    }
    .pay-moneny-area{
      display: flex;
      align-items: center;
      // margin: 8px 0;
      .momey-label{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      .momey-value{
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #f2372e;
        // margin-left: 10px;
      }
      .discount{
        background-color: #f9e6e6;
        color: #f2372e;
        padding: 2px 10px;
        border-radius: 2px;
        font-size: 14px;
        margin-left: 10px;
      }
    }
    .pay-bottom{
      display: flex;
      cursor: pointer;
      .user-agreement{
        color: var(--ss-primary-color);
      }
      .user-link{
        color:#ffa500;
      }
    }
  }
 }
 .team-rule{
  margin-left: 20px;
  // 下划线
  text-decoration: underline;
  cursor: pointer;
 }
 .team-num{
  margin-left: 20px;
 }
</style>
<style>
.vip-modal .ss-modal-content {
  padding: 0!important;
  border-radius: 30px!important;
}
</style>
